<template>
  <div>
    <div class="content">
      <!-- 顶部区域 -->
      <div class="movie-detail">
        <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
      </div>
      <!-- 海报区域 -->
      <div class="haibao">
        <!-- 左侧图片区域 -->
        <div class="left">
          <van-image radius="10" fit="ver" height="10rem" class="img" lazy-load style="width: 100px"
            :src="movieData.imgs" />
        </div>

        <!-- 右侧文字及其按钮 -->
        <div class="right">
          <!-- 内容区域 -->
          <div class="int">
            <div style="font-weight: bold">{{ movieData.name }}</div>
            <div>{{ movieData.actor }}</div>
            <div>{{ movieData.director }}</div>
            <div>{{ movieData.showingon }} / {{ movieData.country }}</div>
          </div>

          <!-- 按钮 -->
          <div class="btn">
            <div class="btn2">
              <van-button type="info">
                 取消收藏
                <van-icon @click="collect_delete()" color="#ee0a24" size="1.5rem" name="like" />
              </van-button>

            </div>
          </div>
        </div>
      </div>

      <!-- 评分区域 -->
      <div>
        <!-- 分割线 -->
        <van-divider :style="{
          color: '#1989fa',
          borderColor: '#1989fa',
          padding: '0 16px',
        }" content-position="left">评分</van-divider>

        <van-rate class="pingfen" allow-half void-icon="star" v-model="value" readonly :count="10" />
      </div>
      <!-- 分割线 -->
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        content-position="left">简介</van-divider>
      <!-- 电影简介 -->
      <div class="jianjie">
        <span>{{ movieData.cont }}</span>
      </div>
      <!-- 分割线 -->
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        content-position="left">推荐理由</van-divider>
      <!-- 推荐理由 -->
      <div class="tuijian">
        <span v-if="tuijian">{{ movieData.tj_cont }}</span>
        <van-empty v-else description="暂无推荐理由" />
      </div>
    </div>
  </div>
</template>

<script>
import httpApi from '@/http';
import { Toast } from 'vant';

export default {
  data() {
    return {
      id: this.$route.params.id,
      movieData: [],
      value: 0,
      title: "",
      tuijian: true,
    };
  },
  methods: {
    collect_delete(){
      // 获取当前电影在收藏表中的id
      console.log('点击了取消收藏');
      let params1 = { user: 'zsy', name: this.movieData.name, type: this.movieData.type }
          httpApi.userApi.get_collectsId(params1).then(res => {
            let params = { id: this.id }
            httpApi.userApi.shoucang(params).then((res) => {
              console.log("res", res);
            })

            Toast.loading({
              message: "取消收藏成功",
              forbidClick: true,
              icon: 'none'
            });
          })
    },
    //导航按钮点击返回
    onClickLeft() {
      this.$router.back();
    },
    movie_sc() {
      let params = { id: this.id};
      httpApi.userApi.infos_collectsByid(params).then((res) => {
        console.log(res);
        this.movieData = res.data.data[0];
        this.value=this.movieData.score
      });
    },
  },


  mounted() {
    console.log(this.id);
    this.movie_sc();
  },
};
</script>

<style lang="scss" scoped>
.haibao {
  display: flex;
  flex-wrap: wrap;

  .left {
    .img {
      display: block;
      margin-left: 10px;
      border-radius: 10px;
      margin-top: 10px;
    }
  }

  .right {
    margin-left: 10px;
    width: 60%;
    margin-top: 10px;

    .int {
      padding-bottom: 10px;
      line-height: 25px;
      font-size: 14px;
    }

    .btn {
      margin-top: 7px;
      margin-left: 15px;
      display: flex;

      .btn1 {
        margin-right: 10px;
      }
    }
  }
}

.content {
  margin-bottom: 50px;
  background-color: var(--colors3);
}

.pingfen {
  margin-left: 10px;
}

.jianjie {
  margin: 0 10px;
  text-indent: 1.5rem;
}
</style>
